import React, { useCallback, useEffect, useMemo, useState } from 'react';
import styled from 'styled-components';
import Page from '../../components/Page';
import PageHeader from '../../components/PageHeader';
import Spacer from '../../components/Spacer';
import HomeCard from './components/HomeCard';
import { OverviewData } from './types';
import useBasisCash from '../../hooks/useBasisCash';
import config from '../../config';
import Notice from '../../components/Notice';
import TokenSymbol from '../../components/TokenSymbol';

import bg_index from '../../assets/image/banner_bigbang.png';
import bg_index_h5 from '../../assets/image/h5banner_bigbang.png';
import LaunchCountdown from '../../components/LaunchCountdown';

const Home: React.FC = () => {
  const basisCash = useBasisCash();

  const [{ cash, sfund, share, sHT }, setStats] = useState<OverviewData>({});
  const fetchStats = useCallback(async () => { 
    const [cash, sfund,share, sHT] = await Promise.all([
      basisCash.getCashStatFromUniswap(),
      basisCash.getsFundUsdtFunc(),
      basisCash.getShareStat(),
      basisCash.getCashStatFromUniswapSHT(),
    ]);
    console.log('sfund',sfund)
    // if (Date.now() < config.bondLaunchesAt.getTime()) {
    //   bond.priceInDAI = '-';
    // }
    setStats({ cash, sfund, share });
  }, [basisCash, setStats]);

  useEffect(() => {
    if (basisCash) {
      fetchStats().catch((err) => console.error(err.stack));
    }
  }, [basisCash]);

  const cashAddr = useMemo(() => basisCash?.sCASH.address, [basisCash]);
  const shareAddr = useMemo(() => basisCash?.SHARE.address, [basisCash]);
  const bondAddr = useMemo(() => basisCash?.SNB.address, [basisCash]);

  const sFundAddr = useMemo(() => basisCash?.sCASH_USDT_LP.address, [basisCash]);

  return (
    <Page>
      <StylehCont>
      <StyleDiv1>
        <img
          src={bg_index}
          alt='logo'
          style={{width: '100%', height: 'auto'}}
        />
      </StyleDiv1>
      <StyleDiv2>
        <img
          src={bg_index_h5}
          alt='logo'
          style={{width: '100%', height: 'auto'}}
        />
      </StyleDiv2>
      <CardWrapper>
        <HomeCard
          title="sCASH"
          symbol="sCASH"
          color="#2FEA99"
          supplyLabel="Circulating Supply"
          address={cashAddr}
          stat={cash}
        />
        <Spacer size="lg" />
        <HomeCard
          title="SHARE"
          symbol="SHARE"
          color="#FA4E32"
          address={shareAddr}
          stat={share}
          supplyLabel="Circulating Supply"
        />
        <Spacer size="lg" />
        <HomeCard
          title="sFUND"
          symbol="FUND"
          color="#318DFF"
          address={sFundAddr}
          stat={sfund}
        />
      </CardWrapper>

      <CardWrapper1>
        <HomeCard
          title="sHT"
          symbol="SHT"
          color="#2FEA99"
          baseNum={cash?Number(cash.totalSupply): 0}
          supplyLabel="Circulating Supply"
          address={cashAddr}
          stat={sHT}
        />
        <Spacer size="lg" />
        <HomeCard
          title="sNEO"
          symbol="SNEO"
          color="#FA4E32"
          baseNum={cash?Number(cash.totalSupply): 0}
          address={shareAddr}
          stat={share}
        />
        <Spacer size="lg" />
        <HomeCard
          title="sETH"
          symbol="SETH"
          color="#318DFF"
          baseNum={cash?Number(cash.totalSupply): 0}
          address={bondAddr}
          stat={sfund}
        />
      </CardWrapper1>


      <CardWrapper1>
        {/* <LaunchCountdown
            deadline={config.bondLaunchesAt}
            description=""
            descriptionLink=""
        /> */}
        <HomeCard
          title="sBTC"
          symbol="SBTC"
          color="#2FEA99"
          baseNum={cash?Number(cash.totalSupply): 0}
          supplyLabel="Circulating Supply"
          address={cashAddr}
          stat={cash}
        />
        <Spacer size="lg" />
        <HomeCard
          title="sDOT"
          symbol="SDOT"
          color="#FA4E32"
          address={shareAddr}
          stat={share}
        />
        <Spacer size="lg" />
        <HomeCard
          title="sFIL"
          symbol="SFIL"
          color="#318DFF"
          address={bondAddr}
          stat={sfund}
        />
      </CardWrapper1>
      </StylehCont>
    </Page>
  );
};

const StyleDiv1 = styled.div`
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  max-width: 1300px;
  width: 100%;
  margin: 0 auto;
  z-index: -1;
  // margin-top: -70px;
  @media (max-width: 768px) {
    display: none;
  }
`

const StyleDiv2 = styled.div`
  display: none;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  max-width: 1300px;
  width: 100%;
  margin: 0 auto;
  z-index: -1;
  // margin-top: -70px;
  @media (max-width: 768px) {
    display: block;
  }
`

const StylehCont = styled.div`
  background: "#100428"
`;

const Stylesubtitle = styled.p`
color: #FFFFFF;
font-size: 18px;
font-weight: 400;
margin: 0;
padding: 0;
text-align: center;
`

const StyledOverview = styled.div`
  align-items: center;
  display: flex;
  @media (max-width: 768px) {
    width: 100%;
    flex-flow: column nowrap;
    align-items: center;
  }
`;

const CardWrapper = styled.div`
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 20px;
  @media (max-width: 768px) {
    width: 100%;
    flex-flow: column nowrap;
    align-items: center;
  }
`;

const CardWrapper1 = styled.div`
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 40px;
  @media (max-width: 768px) {
    width: 100%;
    flex-flow: column nowrap;
    align-items: center;
  }
`;

const StyledNoticeContainer = styled.div`
  max-width: 768px;
  width: 90vw;
`;

const StyledSpacer = styled.div`
  height: ${(props) => props.theme.spacing[4]}px;
  width: ${(props) => props.theme.spacing[4]}px;
`;

const StyledLink = styled.a`
  font-weight: 700;
  text-decoration: none;
  color: ${(props) => props.theme.color.primary.main};
`;

export default Home;
